<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column prop="tid" label="TaskID" min-width="150">
      <!--      <template slot-scope="scope">-->
      <!--        {{ scope.assign.tid }}-->
      <!--      </template>-->
    </el-table-column>
    <el-table-column prop="starttime" label="StartTime" min-width="150">
      <!--      <template slot-scope="scope">-->
      <!--        {{ scope.row.order_no | orderNoFilter }}-->
      <!--      </template>-->
    </el-table-column>
    <el-table-column prop="endtime" label="EndTime" width="150" align="center">
      <template slot-scope="scope">
        {{ scope.row.price | toThousandFilter }}
      </template>
    </el-table-column>
    <el-table-column label="confirm" width="195" align="center">
      <!--      <template slot-scope="scope">-->
      <!--        {{ scope.row.price | toThousandFilter }},{{ scope.row.price | toThousandFilter}}-->
      <!--      </template>-->
      <template slot-scope="scope">
        <el-button
          :type="scope.row.confirmed ? 'success' : 'danger'"
          @click="confirmTask(scope.row)"
        >
          {{ scope.row.confirmed ? 'Confirmed' : 'Confirm' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { transactionList } from '@/api/remote-search'
import { toThousandFilter } from '@/filters'
import data from '@/views/pdf/content'
import axios from 'axios'

export default {
  filters: {
    // statusFilter() {
    //   return statusMap[status]
    // },
    // orderNoFilter(str) {
    //   return str.substring(0, 30)
    // }
  },
  data() {
    return {
      list: [{
        tid: '',
        starttime: '',
        endtime: '',
        finished: '',
        placex: '',
        placey: '',
        confirmed: false
      }]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    toThousandFilter,
    fetchData() {
      transactionList().then(response => {
        console.log(response[0])
        this.list = JSON.parse(JSON.stringify(response))
        console.log(this.list)
        // this.list = response.map(item => ({
        //   ...item,
        //   confirmed: false
        // }))
      })
    },
    confirmTask(task) {
      // Toggle the confirmation status
      task.confirmed = !task.confirmed
      // Trigger the API call
      this.triggerConfirmationAPI(task)
    },
    triggerConfirmationAPI(task) {
      // Replace with your actual API call
      const uid = sessionStorage.getItem('uid')

      fetch('http://1.92.204.101:5000/task/confirm', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + sessionStorage.getItem('token') // 添加 Authorization 头
        },
        body: JSON.stringify({
          tid: task.tid,
          uid: uid
        })
      })
        .then(response => response.json())
        .then(data => {
          console.log(data)
        })
        .catch(error => {
          console.error('Error:', error)
        })
    }

  }
}
</script>
